<template>
  <div class="home">
    <Head></Head>
    <van-swipe class="my-swipe" :autoplay="2000" indicator-color="white">
        <van-swipe-item v-for="item in swipe_list" :key="item.id" 
          style="height:100%;line-height:0;" 
          >
          <a :href="item.url">
            <img :src="item.pic" alt="加载中..." style="width:100%;height:3.5rem">
          </a>
        </van-swipe-item>
    </van-swipe>
    <!-- ------------------------->
    <div class="main-box">
      <div class="car-box">
        <div>
          <img src="https://jmy-pic.wejianzhan.com/0/pic/555c5617e6acae82ad2f839d696ebdbd.jpg@f_webp,q_90" alt="">
          <p>自驾短租</p>
        </div>
         <div>
          <img src="https://jmy-pic.wejianzhan.com/0/pic/eddf8be25a6a1687973799a021122db6.png@f_webp,q_90" alt="">
          <p>自驾长租</p>
        </div>
         <div>
          <img src="https://jmy-pic.wejianzhan.com/0/pic/555c5617e6acae82ad2f839d696ebdbd.jpg@f_webp,q_90" alt="">
          <p>自驾短租</p>
        </div>
      </div>
      <van-button plain type="primary" size="large" @click="$router.push('/home')">开始租车</van-button>
      <div class="box-bouttom">
        <div>
          <h3>公司介绍</h3>
          <p>
              河南省小朋友汽车服务有限公司是河南省内早期经上级主管部门批准并登记注册的汽车租赁公司，
              河南省道路运输协会汽车租赁工作委员会理事长单位，注册资金一千零一万元整（工商在线查询）。
              以社会各界需要用车的个人、企事业单位为服务对象，提供包括婚庆租车，旅游租车，商务租车，
              会议租车等各种类型的汽车租赁服务，是一家专业汽车租赁服务公司。
          </p>
        </div>
        <div>
          <div>
            <h4>联系我们</h4>
            <p>公司地址：黄河路76号附16号合立大厦东配楼二楼</p>
            <p>联系电话：1597886541 </p>
          </div>
        </div>
      </div>
    </div>
    
  </div>
</template>

<script>
import Head from "../components/Home/Head";
import {carousel} from "../request/home/home_http";
export default {
  props: {},
  data() {
    return {
      swipe_list: null
    };
  },
  methods: {},
  mounted() {
    // 广告请求
    carousel().then(res =>{
      this.swipe_list = res;
      console.log(this.swipe_list)
    })
   
  },
  components: {
    Head,
  },
};
</script>

<style scoped lang="less">
* {box-sizing:border-box;}
.home {
  height: 100%;
  font-size: 0.28rem;
  .my-swipe .van-swipe-item {//轮播
    color: #fff;
    font-size: 20px;
    line-height: 150px;
    text-align: center;
    background-color: #39a9ed;
  }

  .main-box {
    .title{
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      padding: .3rem 0;
      >h3 {font-size: .32rem; color: #666; margin-bottom: .05rem;}
      >p {font-size: .12rem; color: var(--groot-ui-color-gray-7);}
    }
    .car-box {
      width: 100%;
      display: flex;
      justify-content: space-around;
      text-align: center;
      div{
        // border: 1px solid;
        width: 30%;
        display: inline-block;
        background-color: rgb(248,248,248);
        img {
          display: inline-block;
          width: 100%;
          height: 2rem;
          padding: .1rem;
        }
        p{
          color: #555;
          font-size: .12rem;
          padding: .05rem;
        }
      }
    }
    button {
      // color: #555;
      letter-spacing: .02rem;
      font-size: .26rem;
      width:60%;
      margin:.3rem 0;
      border:1px solid #ccc;
      margin-left: 1.5rem;
      height: .65rem;
    }
    .box-bouttom {
      >div {display: inline-block;}
      >div:nth-of-type(1){
        width: 100%;
        padding: 0.2rem;
        background-color: rgb(248,248,248);
        h3 {margin-bottom: .1rem;}
        p {
          color: #666;
          font-size: .16rem;
        }
      }
      >div:nth-of-type(2){
        width: 100%;
        height: 2.2rem;
        margin-top: .2rem;
        display: flex;
        justify-content: center;
        background: url('https://jianzhan-image.cdn.bcebos.com/jimuyu/pcSite/tplImage/联系我们-图片.png@f_webp,q_90') no-repeat;
        background-size: 100% 100%;
        position: relative;
        >div {
          color: #eee;
          width: 80%;
          // border: 1px solid;
          position: absolute;
          top: 20%;
          p {font-size: 0.16rem;margin: .1rem 0;}
        }
      }
    }
  }
}
</style>
